<template>
    <div class="spuListMain">
        <div class="searchCondition">
            <div>
                <el-button style="margin-left: 20px" @click="addSpu" size="small" icon="el-icon-plus">添加商品</el-button>
                <el-button style="margin-left: 20px" @click="deleteSpu" size="small" type="danger" icon="el-icon-delete">删除商品</el-button>
            </div>
            <el-input placeholder="请输入内容" v-model="searchText">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <div class="productList">
            <el-table
                    :data="tableData"
                     style="width: 100%"
                    ref="goodsTable"
             >
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="商品名称"
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="商品描述"
                        prop="description">
                    <template slot-scope="scope">
                        <span><span style="color:blue;cursor: pointer" @click="viewDescriotion(scope.row.description)">点击查看描述</span></span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="创建时间"
                        show-overflow-tooltip>

                </el-table-column>
                <el-table-column
                        prop="updated_at"
                        label="最后更新时间"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-edit"
                                @click="updateProduct(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
        <add-spu-dialog v-if="isShowAddDialog" :params="params" @close="close"/>
        <description-dialog v-if="isShowDescDialog" :params="params" @close="close"/>
    </div>
</template>
<script lang="ts">
    import { Component, Prop, Vue,Watch } from 'vue-property-decorator';
    import AdminApiActions from "@/components/api/admin-api-actions";
    import moment from "moment";
    import AddSpuDialog from "@/components/product-manager/dialog/index.vue";
    import DescriptionDialog from "@/components/product-manager/dialog/description-dialog.vue";
    @Component({
        components:{
            AddSpuDialog,
            DescriptionDialog
        }
    })
    export default class productList extends Vue {
        public params:any={};
        public tableData:any=new Array<any>();
        public searchText:any="";
        public total:any=0;
        public currentPage:any=1;
        public pageSize:any=10;
        public isShowAddDialog:any=false;
        public isShowDescDialog:any=false;
        scope: any;
        async created(){
            await this.searchSpus({name:null,pager:{pageSize:this.pageSize,currentPage:this.currentPage}});
        }
        public addSpu(){
            this.params=null;
            this.isShowAddDialog=true;
        }
        public async close(){
            await this.searchSpus({name:this.searchText,pager:{pageSize:this.pageSize,currentPage:this.currentPage}});
            this.isShowAddDialog=false;
            this.isShowDescDialog=false;
        }
        public async searchSpus(params:any){
            let result:any=await AdminApiActions.getSpuList(params);
            this.tableData=result.data.data;
            this.tableData.forEach(item=>{
                item.created_at=moment(item.created_at).format("YYYY-MM-DD HH:mm");
                item.updated_at=moment(item.updated_at).format("YYYY-MM-DD HH:mm");
            });
            this.total=result.data.count;
        }
        @Watch("searchText")
        public async searchByKey(searchText:string){
            await this.searchSpus({name:searchText,pager:{pageSize:this.pageSize,currentPage:this.currentPage}});
        }
        public viewDescriotion(description:any){
              this.params.description=description;
              this.isShowDescDialog=true;
        }
        public async handleSizeChange(pageSize:any){
            this.pageSize=pageSize;
            await this.searchSpus({name:this.searchText,pager:{pageSize:this.pageSize,currentPage:this.currentPage}});
        }
        public async handleCurrentChange(currentPage:any){
            this.currentPage=currentPage;
            await this.searchSpus({name:this.searchText,pager:{pageSize:this.pageSize,currentPage:this.currentPage}});
        }
        //修改当前数据
        public async updateProduct(item:any){
            const spuData=await AdminApiActions.getSpuByCondition({id:item.id});
            spuData.data.data[0].skus.forEach(item=>{
                item.spuId=item.spu_id
                item.params.forEach(param=>{
                    param.skuId=param.sku_id;
                });
                let images=item.images;
                let imagesArray:Array<any>=images.split(";");
                let fileList=new Array<any>();
                imagesArray.forEach(imageItem=>{
                    fileList.push({url:imageItem});
                })
                item.fileList=fileList;
            });
            this.params.spuDataItem=spuData.data.data[0];
            this.isShowAddDialog=true;
        }
        public async deleteSpu(){
            let goodsTables:any=this.$refs.goodsTable;
            let selectData:Array<any>=goodsTables.selection;
            let ids:Array<any>=new Array<any>();
            selectData.forEach(item=>{
                 ids.push(item.id);
            });
            await AdminApiActions.deleteProduct({ids:ids});
            await this.searchSpus({name:this.searchText,pager:{pageSize:this.pageSize,currentPage:this.currentPage}});
        }

    }
</script>
<style lang="less">
    .spuListMain{
         width: 100%;
         height: 100%;
        .productList{
            .el-table_1_column_3{
                .cell{
                    span{
                        display: flex;
                        p{
                            margin-left: 10px;
                        }
                    }
                }
                img{
                    width: 30px;
                    height: 30px;
                }
            }

            width: 100%;
            height: calc(100% - 80px);
            .el-table__body-wrapper {
                overflow-y: auto;
                position: relative;
                height: calc(100% - 50px);
            }
            .el-table--fit{
                height: calc(100% - 40px);
            }
        }
        .el-pagination{
            margin-top: 20px;
        }
        .searchCondition{
            height: 60px;
            width: 100%;
            display: flex;
            align-items: center;
            .el-input-group{
                width: 30%;
                margin-right: 30px;
            }
            justify-content: space-between;
         }
    }

</style>
